Raphael.Chart.pie = Raphael.Chart.pie || {};

Raphael.Chart.pie.theme = {
              title : {
                    title : {style:{fill:"white","font-size":30}},
                    subtitle:{ style:{fill:"#aaa","font-size":12}}
                  },
              transparentRect : {
                        display : true,
                        color : "#fff",
                        opacity : 0.7,
                        radius : 0
                        },
              background : {
                      display : true,
                      type : "color",
                      color : "45-#f00-#000",
                      "img-src" : "image",
                      "img-type" : "tile"
                    },
              legend : {
                      display : true,
                      textStyle : {fill : "black"},
                      draggable : true,
                      background: {
                        display : true,
                        style : {fill:"black",opacity:0.5}
                      }
                },
              pie : {
                    styles:[{fill:"45-#f00-#000",opacity:0.15},{fill:"45-#0f0-#000"},{fill:"45-#00f-#000"},{fill:"45-#fff-#000"},{fill:"45-#afa-#000"},{fill:"45-#faa-#000"},{fill:"45-#aaf-#000"}],
                    animation : {
                        animateIt : true,
                        ms : 3000,
                        style : ">"
                    },
                    clickAnimation : {
                      animate : true,
                      ms : 3000,
                      style : ">"
                    }
                }
            };
Raphael.fn.pieChart = function(labels,values,config,theme){
  var r = this,
      set = r.set(),
      W = r.width,
      H = r.height,
      
      // General :
      htitle = config.general.htitle,
      hfooter = config.general.hfooter,
      wleft = config.general.wleft,
      wright = config.general.wright,
      
      // The pie information :
      offset = config.chart.offset || 0,
      r1 = (config.chart.r1 || 0.1) < 1 ? 0.01 : (config.chart.r1 || 0.1),
      r2 = config.chart.r2 > Math.min((W-wleft-wright)/2,(H-htitle-hfooter)/2)-10 ? Math.min((W-wleft-wright)/2,(H-htitle-hfooter)/2)-10  : config.chart.r2,
      delta = config.chart.delta || 10,
      
      // The title : 
      title = config.title.title,
      subtitle = config.title.subtitle,
      
      // The theme : (all parameters are Not Required)
      th = $.extend(true,{},Raphael.Chart.pie.theme,theme),
      
      // The temporary variables
      cx = (W-wleft-wright)/2+wleft,
      cy = (H-htitle-hfooter)/2+htitle,
      legend;
      
      // The background :
      if(th.background.display){
        r.background(th.background);
      }
      
      // The transparent rectangle :
      if(th.transparentRect.display){
        r.transparentRect({x:wleft,y:htitle,width:W-wleft-wright,height:H-hfooter-htitle},th.transparentRect);
      }
      
      // Draw the Chart Pie :
      var obj = {
                 container : {
                   cx : cx,
                   cy : cy,
                   cw : W-wleft-wright,
                   ch : H-htitle-hfooter,
                 },
                 chart : {
                   offset : offset,
                   r1 : r1,
                   r2 : r2,
                   delta : delta
                 },
                 data : {
                   values : values,
                   labels : labels
                 }
             };
      
      set.push(r.pies(obj,th.pie));
      
      // The legendary :
      if(th.legend.display){
        var legobj = config.legend,
            legtheme =  th.legend,
            x,
            y;
        var xoffset = 5,
            yoffset = 5;
        switch(legobj.position){
          case "leftup" :
            x = wleft+xoffset;
            y = htitle+yoffset;
            break;
          case "leftdown" :
            x = wleft+xoffset;
            y = H-hfooter-legobj.height-yoffset;
            break;
          case "rightup" :
            x = W - wleft - legobj.width-xoffset;
            y = htitle+yoffset;
            break;
          case "rightdown" :
            x = W - wleft - legobj.width-xoffset;
            y = H - hfooter - legobj.height-yoffset;
            break;
        }
        
        legobj.x = x;
        legobj.y = y;
        
        legtheme.colors = th.pie.styles;
        legend = r.legendary(labels,values,legobj,legtheme);
        
        set.push(legend);
        
      }
      
      // Titles :
        // The title :
        r.text(W/2,htitle/3,config.title.title).attr(th.title.title.style);
        // The subtitle :
        r.text(W/2,2*htitle/3,config.title.subtitle).attr(th.title.subtitle.style);
          
      return set;
}

Raphael.fn.pies = function(obj,theme){
      var r = this,
          set = r.set(),
          
      // container
        cx = obj.container.cx,
        cy = obj.container.cy,
        ch = obj.container.ch,
        cw = obj.container.cw,
      // data
        values = obj.data.values,
        labels = obj.data.labels,
      
      // chart : 
        offset = obj.chart.offset || 0,
        r1 = obj.chart.r1,
        r2 = obj.chart.r2,
        delta = obj.chart.delta,
      
      // The temporary variables
        begin = 0,
        end = 0,
        angle = 0,
        sectors = [],
        sum = values.sum(),
        legend;
      
      set.currentSelected = null;
      
      // The tooltip :
      var container = {
            cx : 100,
            cy : 100,
            width : 100,
            height : 50,
            radius : 10
        };
        var theme1 = {
          text : {
            title : {fill:"red",text:"Idrissi"},
            message : {fill:"black",text:"INPT INPT"}
          },
          style : {fill:"white",stroke:"blue","stroke-width":9,opacity:0.15}
        };
        
        var tooltip = r.toolTip(container,theme1).hide();
        var distance = r2+Math.sqrt(Math.pow(50,2)+Math.pow(25,2));
      
      for(var i = 0 ; i<values.length ; i++){
          angle = values[i]*(360-offset*values.length)/sum;
          begin = end;
          end +=angle;
          
          var rad = Math.PI / 180,
              x0 = cx + r1 * Math.cos(-begin * rad),
              x3 = cx + r1 * Math.cos(-end * rad),
              y0 = cy + r1 * Math.sin(-begin * rad),
              y3 = cy + r1 * Math.sin(-end * rad);
           
           sectors[i] = r.path(["M", x0, y0, "L", x0, y0, "A", r1, r1, 1, +(Math.abs(end - begin) > 180), 0, x3, y3, "L", x3, y3, "A", r1, r1, 0, +(Math.abs(+begin - end) > 180), 1,x0,y0].join(","));
           
           sectors[i].hover(function(e){
              if(tooltip != null){
                  var theme2 = {
                    text : {
                      title : {fill:"black",text:labels[this.index]},
                      message : {fill:"red",text:values[this.index]}
                    },
                    style : {fill:theme.styles[this.index].fill,stroke:"#000","stroke-width":2,opacity:0.15}
                  };
                  var rad = Math.PI / 180;
                  tooltip.show();
                  tooltip.animateTo(cx + distance * Math.cos(-(this.begin+this.end) * rad/2),cy + distance * Math.sin(-(this.begin+this.end) * rad/2),theme2).toFront();
              }
           },
           function(){
             tooltip.hide();
           });
           
          if(theme.animation.animateIt){
            sectors[i].animate({path:sector(cx,cy,r1,r2,begin,end)},theme.animation.ms*(i+1)/values.length,theme.animation.style);
          }
          
          else{
            sectors[i] = r.path(sector(cx,cy,r1,r2,begin,end));
          }
          
          sectors[i].attr($.extend({},theme.styles[i],{stroke:theme.styles[i].fill,"stroke-opacity":0.4}));
          sectors[i].x = cx;
          sectors[i].y = cy;
          sectors[i].angle = Raphael.rad((begin+end)/2);
          sectors[i].begin = begin;
          sectors[i].end = end;
          sectors[i].index = i;
          
          if(theme.clickAnimation.animate){
            sectors[i].click(function(){
              if(set.currentSelected!=null){
                set.currentSelected.animate({path:sector(set.currentSelected.x,set.currentSelected.y,r1,r2,set.currentSelected.begin,set.currentSelected.end)},theme.clickAnimation.ms,theme.clickAnimation.style);
              }
              if(set.currentSelected!=this){
                this.animate({path:sector(this.x+delta*Math.cos(this.angle),this.y-delta*Math.sin(this.angle),r1,r2,this.begin,this.end)},theme.clickAnimation.ms,theme.clickAnimation.style);
              }
              set.currentSelected = this;
            });
          }
          
          
          set.push(sectors[i]);
          end+=offset;
      }
      
      return set;
}
